<template>
    <div>
        <div class="header">
            <!-- 返回按钮 -->
            <div class="back" @click="back">
                <van-icon name="arrow-left" />
            </div>
            <!-- 搜索框 -->
            <div class="flex">
                <!-- 搜索框 添加 input 事件 -->
                <van-search id="resourceTitle" @input='inpChange(searchVal)' v-model="searchVal"
                    placeholder="请输入商品名称" />
            </div>
            <!-- 搜索按钮 -->
            <div class="search-font" @click="searchData">搜索</div>
        </div>
        <!-- 没搜索之前 -->
        <div v-if="searchVisible" class="box-padding">
            <!-- 搜索历史 -->
            <div class="search-history">
                <div class="history-flex">
                    <div>搜索历史</div>
                    <!-- -->
                    <div v-if="delStatus" class="img-click" @click="delStatus = false">
                        <van-icon name="delete-o" />
                    </div>
                    <div v-else class="del-status">
                        <div @click="delHistories">全部删除</div>
                        <div @click="delStatus = true">取消</div>
                    </div>
                </div>
                <div v-if="histories.length > 0" class="warp-flex">
                    <div v-for="(item, index) in histories" :key="index">
                        <div @click="searchText(item)">{{ item }}</div>
                        <div @click="searchDelete(index)" v-if="!delStatus">
                            <van-icon name="cross" />
                        </div>
                    </div>
                </div>
                <div v-else class="none-search">暂无搜索历史...</div>
            </div>
            <!-- 大家都在搜 -->
            <div class="search-all">
                <div class="history-flex">大家都在搜</div>
                <div class="warp-flex">
                    <div @click="searchText('叶黄素')">叶黄素</div>
                    <div @click="searchText('米')">米</div>
                    <div @click="searchText('固体饮料')">固体饮料</div>
                    <div @click="searchText('代餐粉')">代餐粉</div>
                    <div @click="searchText('玛卡')">玛卡</div>
                    <div @click="searchText('油')">油</div>
                    <div @click="searchText('葛根')">葛根</div>
                    <div @click="searchText('复合颗粒')">复合颗粒</div>
                    <div @click="searchText('茶精')">茶精</div>
                    <div @click="searchText('糖')">糖</div>
                </div>
            </div>
        </div>
        <!-- 搜索之后 -->
        <div v-else class="product-padding">
            <!-- 产品 -->
            <template v-if="productList.length > 0">

                <van-list v-model="moreLoading" ref="listRef" :immediate-check="false" :finished="loadFinsh"
                    finished-text="没有更多了" @load="searchData('more')">
                    <div class="card" v-for="(item, index) in productList" :key="index" @click="lookDetail(item)">
                        <!-- 产品图片 -->
                        <img :src="path + 'zhonghui/product/' + item.productPic" alt="">
                        <div>
                            <div class="card-name">{{ item.productName }}</div>
                            <div class="card-title">{{ item.productTitle }}</div>
                        </div>
                        <div class="red">￥<span>{{ item.productPrice }}</span>
                        </div>
                    </div>

                </van-list>



            </template>
            <!-- 没有产品 -->
            <template v-if="emptyFlag">
                <div class="result-tip">
                    <span>
                        抱歉，没有找到相关商品~
                    </span>
                </div>
            </template>
        </div>
    </div>

</template>

<script>
import { getProducts } from '../../network/product'
import { alPath } from "../../network/request";
export default {
    name: 'HomeR',
    data() {
        return {
            path: alPath,
            searchVal: "", //搜索
            searchVisible: true, //是否点击搜索
            histories: [], //历史搜索记录
            productList: [], //商品
            isShow: false,
            delStatus: true,
            timer: null,//搜索框 防抖定时器
            emptyFlag: false, //结果是否为空
            shop_id: localStorage.shopId,

            page: 1,
            loadFinsh: false,
            moreLoading: false

        }
    },
    mounted() {

    },
    methods: {
        // 搜索框 input事件
        inpChange: function (value) {
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                // 搜索框有值 发送搜索请求
                if (value) {
                    // 发送搜索请求
                    this.searchData()
                }
            }, 500)
            // 搜索框数据为空
            if (value.length == 0) {
                this.page = 1
                this.searchVisible = true
            }
        },
        searchDelete: function (index) {
            this.histories.splice(index, 1);
            localStorage.setItem("histories", JSON.stringify(this.histories));
        },
        //数组去重
        unique: function (arr) {
            return Array.from(new Set(arr))
        },
        //返回
        back: function () {
            this.$router.go(-1)
        },
        //获取历史搜索
        getHistories: function () {
            if (localStorage.getItem("histories")) {
                this.histories = this.unique(JSON.parse(localStorage.getItem("histories")));
            }
            console.log(this.histories)
        },
        //查看详情
        lookDetail: function (item) {
            localStorage.product_id = item.productId;

            this.$router.push('/detail')



        },
        //点击搜索按钮搜索按钮
        searchData: function () {
            //将历史搜索记录存储
            if (this.searchVal) {
                this.histories.push(this.searchVal);
            }
            //搜索接口
            this.searcgDataInfo();
        },
        searcgDataInfo: function (status) {
            if (status == 'more' && this.loadFinsh) {
                return
            }
            this.searchVisible = false;
            this.productList = []
            localStorage.setItem("histories", JSON.stringify(this.histories));
            console.log(this.searchVal);

            getProducts({
                productName: this.searchVal,
                size: 10,
                page: this.page
            }).then(res => {
                if (res.flag) {

                    this.productList.push(...res.data.list)

                    this.emptyFlag = this.productList.length == 0

                    this.loadFinsh = res.data.list.length < 10
                    if (!this.loadFinsh) {
                        this.page += 1
                    }


                }
            })

        },
        //点击文字
        searchText: function (val) {
            this.searchVal = val;
            this.histories.includes(val) ? '' : this.histories.push(val);
            this.searcgDataInfo();
        },
        //清空历史搜索记录
        delHistories: function () {
            var _this = this;
            this.$dialog.confirm({
                title: '提示',
                message: '您将要清空历史搜索记录',
            })
                .then(function () {
                    // 显示删除按钮的图标
                    _this.delStatus = true
                    _this.histories = [];
                    localStorage.setItem("histories", JSON.stringify([]));
                    _this.$toast('清空成功')
                })
                .catch(function () {
                    _this.$toast('已取消')
                });
        },





    },
    created() {
        this.getHistories();
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>
.van-search__content {
    background-color: #ececec !important;
    border-radius: 32px !important;
}

.van-search {
    background-color: transparent !important;
    padding-left: 0 !important;
}


.none-search {
    position: relative;
    height: 88px;
    text-align: center;
    font-size: 24px;
    color: #999;
}

#app {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow-y: scroll;
    background-color: #fafafa;
}

.header {
    position: fixed;
    z-index: 99;
    width: 100%;
    top: 0;
    height: 88px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px #dcdcdc;
    padding-top: 10px;
}

.back {
    width: 10%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back .van-icon {
    font-size: 40px;
}

.flex {
    position: relative;
    width: 76%;
    overflow: hidden;
}

.flex img {
    position: absolute;
    z-index: 11;
    display: block;
    left: 24px;
    width: 32px;
    height: 32px;
    bottom: 32px;
}

.van-search {
    position: relative;
    padding: 0;
    border-radius: 32px;
    overflow: hidden;
}

.search-font {
    margin-left: 14px;
    width: 14%;
}

.van-search .van-cell {
    padding: 4px 26px 4px 0 !important;
}

.box-padding {
    padding: 24px;
    font-size: 24px;
    margin-top: 114px;
}

.search-font {
    font-size: 28px;
    color: #999;
}

.history-flex {
    display: flex;
    font-size: 28px;
    color: #333;
    justify-content: space-between;
    margin-bottom: 24px;
    height: 56px;
    line-height: 56px;
    position: relative;
}

.history-flex img {
    display: block;
    width: 32px;
    height: 32px;
}

.warp-flex {
    display: flex;
    flex-wrap: wrap;
}

.warp-flex>div {
    margin-right: 24px;
    padding: 16px 24px;
    background: #dcdcdc;
    border-radius: 44px;
    color: #666;
    margin-bottom: 32px;
    height: 24px;
    line-height: 24px;
    display: flex;
}

.warp-flex>div>div:nth-child(2) {
    padding-left: 24px;
}

.card {
    background-color: #fff;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 160px;
    padding-left: 220px;
    border-bottom: 2px #f2f2f2 solid;
}

.card-flex {
    display: flex;
    justify-content: space-between;
}

.red {
    color: #FF3B14;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
}

.red>span {
    font-size: 36px;
    margin-right: 8px;
}

del {
    color: #666;
}

.card-name {
    font-size: 28px;
    height: 36px;
    line-height: 1.5;
    color: #333;
}

.card div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-title {
    font-size: 24px;
    color: #999;
    height: 32px;
    line-height: 1.5;
    margin-top: 6px;
}

.tag {
    position: absolute;
    background-color: #1E70FF;
    right: 32px;
    bottom: 24px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    color: #fff;
    padding: 4px 16px;
    border-radius: 16px 0 16px 0;
}

.product-padding {
    margin-top: 152px;
}

.card img {
    position: absolute;
    width: 156px;
    left: 32px;
    height: 156px;
    border-radius: 16px;
}

.result-tip {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 36px;
}

.result-tip img {
    display: block;
    width: 120px;
    height: 120px;
}

.result-tip span {
    font-size: 24px;
    color: #969696;
}

.img-click {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
}

.van-icon-search {
    display: none !important;
}

.van-field__left-icon {
    margin-right: 56px !important;
}

.del-status {
    position: absolute;
    display: flex;
    right: 0;
    font-size: 24px;
    height: 28px;
    align-items: center;
    top: 16px;
}

.del-status>div:nth-child(1) {
    color: #666;
    padding-right: 12px;
    border-right: 2px solid #999;
    height: 28px;
    line-height: 28px;

}

.del-status>div:nth-child(2) {
    color: #ff3b14;
    padding-left: 12px;
}
</style>